<template>
  <div class="vantList">
    <PullRefresh v-model="refreshing" @refresh="onRefresh">
       <List
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
            <div v-for="(item,index) of list" :key="index">
                {{item}}
            </div>
        </List>
    </PullRefresh>
  </div>
</template>

<script>
import { List,PullRefresh } from 'vant';
export default {
    name:'vantList',
    components:{
        List,
        PullRefresh
    },
    data(){
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            total: 100,
            currentPage:1,
            pageSize: 12
        }
    },
    methods:{
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                for (let i = 0; i < this.pageSize; i++) {
                    this.list.push(this.list.length + 1);
                }
                this.loading = false;

                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;  
            // 重新加载数据
            this.loading = true;
            this.onLoad();
        },
    }
}
</script>

<style lang="less" scoped>
.vantList{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    overflow-y: auto;
}
</style>

